import 'dart:async';

import 'package:flutter/material.dart';

void main() {
  runApp(MyApp());
}

//自定义组件
class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // MaterialApp是根组件
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            title: Text('Dialog Web'),
          ),
          body: DialogPage()),
      theme: ThemeData(primaryColor: Colors.blue),
    );
  }
}

class DialogPage extends StatefulWidget {
  DialogPage({Key? key}) : super(key: key);

  @override
  _DialogPageState createState() => _DialogPageState();
}

class _DialogPageState extends State<DialogPage> {
  @override
  void initState() {
    super.initState();
  }

  _selfDefinedDialog() {
    showDialog(
        context: context,
        builder: (context) {
          return LoadingDialog("my title", "mycontaint");
        });
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Column(
        children: [
          Row(
            children: [
              ElevatedButton(
                child: Text("self defined dialog"),
                onPressed: _selfDefinedDialog,
              ),
            ],
          )
        ],
      ),
    );
  }
}

class LoadingDialog extends Dialog {
  final String contents;
  final String title;

  LoadingDialog(this.title, this.contents);

  _showTimer(context) {}

  @override
  Widget build(BuildContext context) {
    _showTimer(context);
    //必须返回Material组件
    return Material(
        // color: Colors.amber,
        //其他type值需要设置color
        type: MaterialType.transparency,
        child: Center(
          child: Container(
              height: 80,
              width: 200,
              color: Colors.white,
              child: Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: [
                  Padding(
                    padding: EdgeInsets.all(10),
                    child: Stack(
                      children: [
                        Align(
                          alignment: Alignment.center,
                          child: Text(this.title),
                        ),
                        Align(
                          alignment: Alignment.centerRight,
                          child: InkWell(
                            child: Icon(Icons.close),
                            onTap: () {
                              Navigator.pop(context);
                            },
                          ),
                        )
                      ],
                    ),
                  ),
                  Divider(),
                  Container(
                    child: Text(this.contents),
                  )
                ],
              )),
        ));
  }
}
